<template>
  <div class="modify">
    <div class="modify-bg" @click="hideModify">
      <transition
        name="fade"
        enter-active-class="animated fadeInUp"
        leave-active-class="animated fadeOutDown">
        <div class="modify-content" @click="stopPropagation" v-show="isshow"
             :style="{'background-color':Styles.backgroundColor,color:Styles.color}">
          <div class="modify-body">
            <div class="first-div" :style="{borderColor:Styles.borderColors}" v-if="isios">
              <div class="div" :style="{color:Styles.color}">
                <i class="iconfont icon-houtaibofang"></i>后台播放
              </div>
              <div class="div">
                <span class="span" @click="showpopup">查看设置方法</span>
              </div>
            </div>
            <div class="first-div" :style="{borderColor:Styles.borderColors}" ref="firstDiv">
              <div class="div" :style="{color:Styles.color}"><i class="iconfont icon-zitidaxiao-icon"></i>字体大小</div>
              <div class="div Sizi">
                <div class="min" @click.stop="Siziclick(0)">A</div>
                <div class="Sizi-bg" ref="SiziBg" @touchstart="SiziStart" @touchmove="SiziMove" @touchend="SiziEnd">
                  <div class="spans"
                       :style="{ 'left': fontSizeval+'%',backgroundColor:Styles.iconBgColor,transform:'scale('+scale+')'}"></div>
                  <div class="ruler" :style="{borderColor:Styles.borderColor}">
                  </div>
                  <div class="rulers">
                    <div class="cm" :style="{borderColor:Styles.borderColor}"><i @click.stop="Siziclick(0)"></i></div>
                    <div class="cm" :style="{borderColor:Styles.color}"><i @click.stop="Siziclick(1)"></i></div>
                    <div class="cm" :style="{borderColor:Styles.borderColor}"><i @click.stop="Siziclick(2)"></i></div>
                    <div class="cm" :style="{borderColor:Styles.borderColor}"><i @click.stop="Siziclick(3)"></i></div>
                  </div>
                </div>
                <div class="max" @click.stop="Siziclick(5)">A</div>
              </div>
            </div>
            <div class="first-div" style="border-bottom: none">
              <div class="div" :style="{color:Styles.color}"><i class="iconfont icon-yuedubeijing"></i>阅读背景</div>
              <div class="div colornth">
                <p class="icons iconscolor1 " @click.stop='options(1)' :style="{borderColor:Styles.color}"></p>
                <!--<p class="icons iconscolor2 " @click.stop="modecolor=2"></p>-->
                <div class="icons iconscolor3" @click.stop="options(2)" :style="{borderColor:Styles.color}">
                  <i class="iconfont icon-yejianmoshi"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'index',
    data: function () {
      return {
        isshow: false,
        modecolor: 0,
        scale: 1,
        style: this.Styless,
        fontSizeval: this.TenFontSizi.fontSizeval,
        fontSize: this.TenFontSizi.fontSize,
        isios: !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
        Sizetouch: {
          x: 0,
          startProgress: 0
        },
        animate: 'unctn'
      }
    },
    mounted: function () {
      var _this = this
      setTimeout(() => {
        _this.isshow = true
      }, 500)
      // this.fontSizeval = this.fontval
    },
    props: ['isModify', 'fontval', 'Styless', 'TenFontSizi'],
    computed: {
      Styles: {
        get: function () {
          return this.style
        },
        set: function (val) {
          this.style = val
        }
      }
    },
    methods: {
      options: function (num) {
        if (num === 1) {
          this.Styles = {
            mode: num,
          }
        } else if (num === 2) {
          this.Styles = {
            backgroundColor: '#25252b',
            color: '#fff',
            iconBgColor: '#25252b',
            mode: num,
            opacity: 0.4,
            borderColor: 'rgba(255,255,255,.4)',
            borderColors: 'rgba(255,255,255,.05)'
          }
        }
        this.$emit('Color', this.Styles)
      },
      hideModify: function () {
        this.$emit('hide')
      },
      stopPropagation: function (e) {
        if (e && e.stopPropagation) {
          e.stopPropagation()
        } else {
          window.event.cancelBubble = true
        }
      },
      SiziStart: function (e) {
        this.scale = 1.2
        this.Sizetouch.x = e.changedTouches[0].clientX
        this.Sizetouch.startProgress = this.fontSizeval
      },
      SiziMove: function (e) {
        this.scale = 1.2
        e && e.preventDefault()
        let touch = e.changedTouches[0]
        let offsetX = touch.clientX - this.Sizetouch.x
        let targetWidth = this.$refs.SiziBg.offsetWidth
        var fontSize = (Number((offsetX / targetWidth * 100).toFixed(2))) + this.Sizetouch.startProgress
        if (fontSize >= 100 || fontSize >= 90 && fontSize <= 100) {
          this.fontSizeval = 100
          this.fontSize = 30
        } else if (fontSize >= 20 && fontSize < 40) {
          this.fontSizeval = 25
          this.fontSize = 18
        } else if (fontSize >= 40 && fontSize < 70) {
          this.fontSizeval = 50
          this.fontSize = 21
        } else if (fontSize >= 70 && fontSize < 90) {
          this.fontSizeval = 75
          this.fontSize = 24
        } else if (fontSize <= 0 || fontSize >= 0 && fontSize < 20) {
          this.fontSizeval = 0
          this.fontSize = 15
        }
        var obj = {
          fontSize: this.fontSize,
          fontSizeval: this.fontSizeval
        }
        this.PlayStyle(obj)
      },
      SiziEnd: function (e) {
        this.scale = 1
      },
      Siziclick: function (num) {
        this.fontSizeval = num * 25 > 100 ? 100 : num * 25
        this.fontSize = (30 + (6 * num)) / 2
        var obj = {
          fontSize: this.fontSize,
          fontSizeval: this.fontSizeval
        }
        this.PlayStyle(obj)
      },
      PlayStyle: function (obj) {

        this.$emit('TenFontSizi', obj)
        // localStorage.setItem('PlayingStyle', JSON.stringify(obj))
      },
      showpopup: function () {
        this.$emit('PopupShow')
        this.$emit('hide')
      }
    },
    components: {}
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
